<template>
    <div class="container">
        <div class="columns">
            <div class="column has-text-centered">
                <strong>Notes</strong>
                <div v-for="note in notes" :key="note" class="notes">{{note}}</div>
            </div>
            <div class="column has-text-centered">
                <strong>Timestamp</strong>
                <div v-for="timestamp in timestamps" :key="timestamp" class="timestamps">{{timestamp}}</div>
            </div>
        </div>
        <input-component
            :placeholder="placeholder"
            @add-note="addNote"></input-component>
        <note-count-component></note-count-component>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import InputComponent from '@/components/app-1/InputComponent.vue'
import NoteCountComponent from '@/components/app-1/NoteCountComponent.vue'
import { Note } from '@/model/Note'

@Component({
    components: { NoteCountComponent, InputComponent }
})
export default class CustomEvent extends Vue {
    name = 'CustomEvent';
    placeholder = "Enter a note";

    private get notes():Array<string>{
        return this.$store.state.notes;
    }

    private get timestamps():Array<string>{
        return this.$store.getters.getTimestamps;
    }

    private addNote(event:Note){
        console.log(event);
    }

}
</script>

<style scoped>
.notes-section{
    vertical-align: center;
}
</style>
